<div>
    <clyd-sourceapps v-model="scope.editedObject.apps"></clyd-sourceapps>
    <clyd-datatype v-model="scope.editedObject.data_type" :enabledTypes="['event','session']" :extra-types="[{value: 'event', label: i18nM('times-of-day.event')}]"></clyd-datatype>
    <template v-if="scope.editedObject.data_type === 'event'">
        <cly-form-field name="selectedEvent" rules="required" :label="i18n('times-of-day.event')">
            <cly-select-x
                :auto-commit="true"
                :hide-all-options-tab="true"
                :options="eventOptions"
                v-model="scope.editedObject.events">
            </cly-select-x>
        </cly-form-field>
    </template>
    <cly-form-field name="timePeriod" rules="required" :label="i18n('times-of-day.time-period')">
        <el-select v-model="scope.editedObject.period">
            <el-option
                v-for="item in dateBuckets"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
    </cly-form-field>
    <clyd-title v-model="scope.editedObject.title"></clyd-title>
</div>